/**
 * Created by Administrator on 2017/10/10.
 */
import React from "react";
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {Flex,Tabs,Grid,Button} from "antd-mobile";
import styles from '../index.less';

import  study1 from '../img/study1.png'
import  study2 from '../img/study2.png'
import  study3 from '../img/study3.png'
import  study4 from '../img/study4.png'

const TabPane = Tabs.TabPane;
const PlaceHolder = props => (
  <div
    style={{
      color: props.flag ? '#FFFFFF':'#757575',
      textAlign: 'center',
      backgroundColor:props.flag ? '#ff0000':'#FFFFFF',
      height: '0.5rem',
      lineHeight: '0.5rem',
      margin:'0.05rem 0.3rem',
      padding:'0rem 0.1rem',
      fontSize:'0.3rem',
      borderRadius:'0.05rem'
    }}
    {...props}
  >{props.label}</div>
);

class index extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      classify:'1-1',
      screen:'2-1',
    };
  }

  callback = (key) =>{
    console.log('callback', key);
  };

  handleTabClick = (key) =>{
    console.log('callback', key);
  };
  onClick =(item,index)=>{
    this.props.dispatch(
      routerRedux.push({
        pathname: `/study/course`
      })
    );
  };
  render(){

    const data = [1,2,3,4,5,6,7,8,9,10];

    return(
      <div className="courseList"  style={{backgroundColor:"white"}}>
        <div style={{backgroundColor:'white',paddingTop:'0.2rem'}}>
          {/*<div>*/}
            {/*<div style={{display:'inline-block',textAlign:'right',width:'12%',color:'#A8A8A8'}}>分类</div>*/}
            {/*<div style={{display:'inline-block',width:'88%'}}>*/}
              {/*<Flex wrap="wrap">*/}
                {/*<PlaceHolder className="inline" flag={'1-1' === this.state.classify} label="两学一做" onClick={()=>this.classifyClick('1-1')}/>*/}
                {/*<PlaceHolder className="inline" flag={'1-2' === this.state.classify}  label="互联网法律法规" onClick={()=>this.classifyClick('1-2')}/>*/}
                {/*<PlaceHolder className="inline" flag={'1-3' === this.state.classify}  label="互联网党建" onClick={()=>this.classifyClick('1-3')}/>*/}
                {/*<PlaceHolder className="inline" flag={'1-4' === this.state.classify}  label="党史精粹" onClick={()=>this.classifyClick('1-4')}/>*/}
                {/*<PlaceHolder className="inline" flag={'1-5' === this.state.classify}  label="党风廉政" onClick={()=>this.classifyClick('1-5')}/>*/}
                {/*<PlaceHolder className="inline" flag={'1-6' === this.state.classify}  label="先进典型" onClick={()=>this.classifyClick('1-6')}/>*/}
                {/*<PlaceHolder className="inline" flag={'1-7' === this.state.classify}  label="中央文件精神" onClick={()=>this.classifyClick('1-7')}/>*/}
                {/*<PlaceHolder className="inline" flag={'1-8' === this.state.classify}  label="自治区文件精神" onClick={()=>this.classifyClick('1-8')}/>*/}
              {/*</Flex>*/}
            {/*</div>*/}
          {/*</div>*/}
          <div>
            <div style={{display:'inline-block',textAlign:'right',width:'12%',color:'#A8A8A8'}}>筛选</div>
            <div style={{display:'inline-block',width:'88%'}}>
              <Flex wrap="wrap">
                <PlaceHolder className="screen" label="全部" flag={'2-1' === this.state.screen} onClick={()=>this.screenClick('2-1')}/>
                <PlaceHolder className="screen" label="必修" flag={'2-2' === this.state.screen} onClick={()=>this.screenClick('2-2')}/>
                <PlaceHolder className="screen" label="选修" flag={'2-3' === this.state.screen} onClick={()=>this.screenClick('2-3')}/>
              </Flex>
            </div>
          </div>
        </div>
        <Grid
          data={data}
          columnNum={2}
          hasLine={false}
          onClick={this.onClick}
          renderItem={dataItem => {
            let src ;
            switch (dataItem %4)
            {
              case 0:
                src = study1;
                break;
              case 1:
                src = study2;
                break;
              case 2:
                src = study3;
                break;
              case 3:
                src = study4;
                break;
            }
            return(
              <div style={{textAlign:'center',padding:'0.2rem'}}>
                <div style={{ width: '100%'}} >
                  <img src={src} style={{ width: '100%'}} />
                </div>
                <div style={{ textAlign:'left',marginTop:'0.1rem',fontSize: '0.31rem'}}>10问教你读懂两学一做</div>
                <div style={{ textAlign:'left',marginTop:'0.1rem',color:'#C0C0C0',fontSize: '0.28rem'}}>2333次学习</div>
              </div>
            )}}/>
      </div>
    )
  }
}
function mapStateToProps({personCenter, personLayout}){
  return {personCenter, personLayout};
}
export default connect(mapStateToProps)(index);
